<template>
  <div class="right-box">
    <div>
      <template v-for="item in current">
        <!-- 主图 -->
        <a-form
          layout="vertical"
          v-if="currentAlias == 'MainDrawing' && item.alias == 'MainDrawing'"
        >
          <div>
            <a-row class="mb-10">
              <span class="font-bold">主图</span>
            </a-row>
            <div class="flex justify-center">
              <img
                v-if="mainImgList[0]"
                :src="mainImgList[0].url"
                class="main-img"
              />
            </div>
            <a-upload
              :action="$utils.imgAction"
              :key="item.alias"
              :headers="{ 'org-token': $store.getters.token }"
              v-model:file-list="mainImgList"
              @change="
                (e) => {
                  handleUploadChange(e);
                }
              "
              :multiple="false"
              name="image"
              :data="{ dir: 'org_personal' }"
              accept="image/jpg,image/jpeg,image/gif,image/png"
              :showUploadList="false"
            >
              <div class="flex justify-center mt-10">
                <a-button style="width: 260px">替换</a-button>
              </div>
              <div class="flex justify-center text-grey text-12">
                建议上传1920*680尺寸
              </div>
            </a-upload>
          </div>
        </a-form>
        <!-- 移动端主图 -->
        <a-form
          layout="vertical"
          v-if="
            currentAlias == 'MainDrawing' && item.alias == 'MainDrawingMobile'
          "
        >
          <div>
            <a-row class="mt-20 mb-10">
              <span class="font-bold">移动端主图</span>
            </a-row>
            <div class="flex justify-center">
              <img
                v-if="item.imgList[0]"
                :src="item.imgList[0].url"
                class="main-mobile-img"
                mode="widthFix"
              />
            </div>
            <a-upload
              :action="$utils.imgAction"
              :key="item.alias"
              :headers="{ 'org-token': $store.getters.token }"
              v-model:file-list="mainImgList"
              @change="handleUploadMobileChange"
              :multiple="false"
              name="image"
              :data="{ dir: 'org_personal' }"
              accept="image/jpg,image/jpeg,image/gif,image/png"
              :showUploadList="false"
            >
              <div class="flex justify-center mt-10">
                <a-button style="width: 260px">替换</a-button>
              </div>
              <div class="flex justify-center text-grey text-12">
                建议上传650*550尺寸
              </div>
            </a-upload>
          </div>
        </a-form>
        <!-- 推广区1 -->
        <div
          layout="vertical"
          v-if="
            currentAlias == 'PromotionArea1' && item.alias == 'PromotionArea1'
          "
        >
          <a-row>
            <span class="font-bold">推广区1</span>
          </a-row>
          <a-row class="my-10"> 开关 </a-row>
          <a-row>
            <a-switch v-model:checked="item.switch"></a-switch>
          </a-row>

          <div class="flex justify-center text-grey text-12 mt-10">
            建议上传1:1尺寸的图标
          </div>
          <a-row
            v-for="(area1Item, aIndex) in item.itemList"
            :key="aIndex"
            style="margin: 10px 0"
          >
            <div class="area1">
              <div class="flex items-center border-dashed p-10">
                <a-upload
                  size="small"
                  :key="aIndex"
                  :action="$utils.imgAction"
                  :headers="{ 'org-token': $store.getters.token }"
                  v-model:file-list="area1Item.imgList"
                  @change="
                    (e) => {
                      area1ImgChange(e, area1Item);
                    }
                  "
                  :multiple="false"
                  name="image"
                  :data="{ dir: 'org_personal' }"
                  accept="image/jpg,image/jpeg,image/gif,image/png"
                  list-type="picture-card"
                >
                  <div
                    v-if="area1Item.imgList && area1Item.imgList.length == 0"
                  >
                    <plus-outlined />
                    <div style="color: #999">上传</div>
                  </div>
                </a-upload>
                <div class="ml-5">
                  <div>
                    <a-input
                      size="small"
                      placeholder="请输入标题"
                      v-model:value="area1Item.title"
                    ></a-input>
                  </div>
                  <div class="mt-5">
                    <a-select
                      size="small"
                      v-model:value="area1Item.isLink"
                      style="width: 100%"
                    >
                      <a-select-option :value="0">点击不跳转</a-select-option>
                      <a-select-option :value="1">点击跳转</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>
              <div class="area-bottom">
                <div v-if="area1Item.isLink == 1">
                  <span>路径</span>
                  <a-button
                    type="link"
                    class="ml-5"
                    @click="showChoosePath(item.alias, area1Item, aIndex)"
                  >
                    <template
                      v-if="area1Item.linkData && area1Item.linkData.name"
                    >
                      <span>{{ area1Item.linkData.name }}</span>
                    </template>
                    <template v-else>
                      <span>点击选择</span>
                      <RightOutlined style="margin-left: 3px" />
                    </template>
                  </a-button>
                </div>
              </div>
            </div>
          </a-row>
        </div>
        <!-- 资讯栏 -->
        <div
          layout="vertical"
          v-if="currentAlias == 'Information' && item.alias == 'Information'"
        >
          <a-row>
            <span class="font-bold">资讯栏</span>
          </a-row>
          <a-row class="my-10"> 标题 </a-row>
          <a-row>
            <a-input
              placeholder="请输入标题"
              v-model:value="item.title"
            ></a-input>
          </a-row>
          <a-row class="mt-20 mb-10"> 展示数量 </a-row>
          <a-row>
            <a-input
              placeholder="请输入展示数量"
              v-model:value="item.show_max_num"
            ></a-input>
          </a-row>
        </div>
        <!-- 推广区2 -->
        <div
          layout="vertical"
          v-if="
            currentAlias == 'PromotionArea2' && item.alias == 'PromotionArea2'
          "
        >
          <a-row>
            <span class="font-bold">推广区2</span>
          </a-row>
          <a-row class="my-10"> 开关 </a-row>
          <a-row>
            <a-switch v-model:checked="item.switch"></a-switch>
          </a-row>
          <a-row class="my-10"> 标题 </a-row>
          <a-row>
            <a-input
              placeholder="请输入标题"
              v-model:value="item.title"
            ></a-input>
          </a-row>
          <a-row class="mt-20 mb-10"> 列数 </a-row>
          <a-row>
            <a-radio-group v-model:value="item.columns">
              <a-radio :value="6">6</a-radio>
              <a-radio :value="7">7</a-radio>
              <a-radio :value="8">8</a-radio>
            </a-radio-group>
          </a-row>
          <a-row class="my-10">设置导航</a-row>
          <div class="flex justify-center text-grey text-12 mt-10">
            建议上传1:1尺寸的图标
          </div>
          <div
            style="overflow-y: auto; max-height: 46vh"
            class="hide-scroller-bar"
          >
            <a-row
              class="area1-list"
              v-for="(area2Item, aIdnex2) in item.itemList"
              :key="area2Item.key"
              style="margin: 10px 0; position: relative"
            >
              <div class="del-icon" @click="delArea2Item(area2Item.key)">
                <CloseOutlined style="color: #fff; font-size: 12px" />
              </div>
              <div class="area1">
                <div class="flex items-center border-dashed p-10">
                  <a-upload
                    size="small"
                    :key="area2Item.key"
                    :action="$utils.imgAction"
                    :headers="{ 'org-token': $store.getters.token }"
                    v-model:file-list="area2Item.imgList"
                    @change="
                      (e) => {
                        area2ImgChange(e, area2Item);
                      }
                    "
                    :multiple="false"
                    name="image"
                    :data="{ dir: 'org_personal' }"
                    accept="image/jpg,image/jpeg,image/gif,image/png"
                    list-type="picture-card"
                  >
                    <div
                      v-if="area2Item.imgList && area2Item.imgList.length == 0"
                    >
                      <plus-outlined />
                      <div style="color: #999">上传</div>
                    </div>
                  </a-upload>
                  <div class="ml-5">
                    <div>
                      <a-input
                        size="small"
                        placeholder="请输入标题"
                        v-model:value="area2Item.title"
                        >{{ area2Item.key }}</a-input
                      >
                    </div>
                    <div class="mt-5">
                      <a-input
                        size="small"
                        placeholder="请输入副标题"
                        v-model:value="area2Item.subTitle"
                      ></a-input>
                    </div>
                  </div>
                </div>
                <div class="area-bottom">
                  <div>
                    <span>路径</span>
                    <a-button
                      type="link"
                      class="ml-5"
                      @click="showChoosePath(item.alias, area2Item, aIdnex2)"
                    >
                      <template
                        v-if="area2Item.linkData && area2Item.linkData.name"
                      >
                        <span>{{ area2Item.linkData.name }}</span>
                      </template>
                      <template v-else>
                        <span>点击选择</span>
                        <RightOutlined style="margin-left: 3px" />
                      </template>
                    </a-button>
                  </div>
                </div>
              </div>
            </a-row>
          </div>
          <a-button style="width: 100%" @click="addArea2Item">
            <PlusOutlined />添加导航
          </a-button>
        </div>

        <!-- 推广区3 -->
        <div
          layout="vertical"
          v-if="
            currentAlias == 'PromotionArea3' && item.alias == 'PromotionArea3'
          "
        >
          <a-row>
            <span class="font-bold">推广区3</span>
          </a-row>
          <a-row class="my-10"> 标题 </a-row>
          <a-row>
            <a-input
              placeholder="请输入标题"
              v-model:value="item.title"
            ></a-input>
          </a-row>
          <a-row class="mt-20 mb-10"> 展示数量 </a-row>
          <a-row>
            <a-input
              placeholder="请输入展示数量"
              v-model:value="item.show_max_num"
            ></a-input>
          </a-row>
        </div>
        <!-- 推广区4 -->
        <a-form
          layout="vertical"
          v-if="
            currentAlias == 'PromotionArea4' && item.alias == 'PromotionArea4'
          "
        >
          <a-row>
            <span class="font-bold">推广区4</span>
          </a-row>
          <a-row class="my-10"> 开关 </a-row>
          <a-row>
            <a-switch v-model:checked="item.switch"></a-switch>
          </a-row>
          <a-row class="my-10"> 标题 </a-row>
          <a-row>
            <a-input
              placeholder="请输入标题"
              v-model:value="item.title"
            ></a-input>
          </a-row>
          <a-row class="mt-20 mb-10"> 列数 </a-row>
          <a-row>
            <a-radio-group v-model:value="item.columns">
              <a-radio :value="6">6</a-radio>
              <a-radio :value="7">7</a-radio>
              <a-radio :value="8">8</a-radio>
            </a-radio-group>
          </a-row>
          <a-row class="my-10">设置导航</a-row>
          <div class="flex justify-center text-grey text-12 mt-10">
            建议上传1:1尺寸的图标
          </div>
          <div
            style="overflow-y: auto; max-height: 46vh"
            class="hide-scroller-bar"
          >
            <a-row
              class="area4-list"
              v-for="(area4Item, aIdnex2) in item.itemList"
              :key="area4Item.key"
              style="margin: 10px 0; position: relative"
            >
              <div class="del-icon" @click="delArea4Item(area4Item.key)">
                <CloseOutlined style="color: #fff; font-size: 12px" />
              </div>
              <div class="area1">
                <div class="flex items-center border-dashed p-10">
                  <a-upload
                    size="small"
                    :key="area4Item.key"
                    :action="$utils.imgAction"
                    :headers="{ 'org-token': $store.getters.token }"
                    v-model:file-list="area4Item.imgList"
                    @change="
                      (e) => {
                        area4ImgChange(e, area4Item);
                      }
                    "
                    :multiple="false"
                    name="image"
                    :data="{ dir: 'org_personal' }"
                    accept="image/jpg,image/jpeg,image/gif,image/png"
                    list-type="picture-card"
                  >
                    <div
                      v-if="area4Item.imgList && area4Item.imgList.length == 0"
                    >
                      <plus-outlined />
                      <div style="color: #999">上传</div>
                    </div>
                  </a-upload>
                  <div class="ml-5">
                    <div>
                      <a-input
                        size="small"
                        placeholder="请输入标题"
                        v-model:value="area4Item.title"
                      ></a-input>
                    </div>
                    <div class="mt-5">
                      <a-input
                        size="small"
                        placeholder="请输入副标题"
                        v-model:value="area4Item.subTitle"
                      ></a-input>
                    </div>
                  </div>
                </div>
                <div class="area-bottom">
                  <div>
                    <span>路径</span>
                    <a-button
                      type="link"
                      class="ml-5"
                      @click="showChoosePath(item.alias, area4Item, aIdnex2)"
                    >
                      <template
                        v-if="area4Item.linkData && area4Item.linkData.name"
                      >
                        <span>{{ area4Item.linkData.name }}</span>
                      </template>
                      <template v-else>
                        <span>点击选择</span>
                        <RightOutlined style="margin-left: 3px" />
                      </template>
                    </a-button>
                  </div>
                </div>
              </div>
            </a-row>
          </div>
          <a-button style="width: 100%" @click="addArea4Item">
            <PlusOutlined />添加导航
          </a-button>
        </a-form>
        <!-- 推广区5 -->
        <div
          layout="vertical"
          v-if="
            currentAlias == 'PromotionArea5' && item.alias == 'PromotionArea5'
          "
        >
          <a-row>
            <span class="font-bold">推广区1</span>
          </a-row>
          <a-row class="my-10"> 开关 </a-row>
          <a-row class="my-10">
            <a-switch v-model:checked="item.switch"></a-switch>
          </a-row>
          <a-row class="mt-30 mb-10"> 图片 </a-row>
          <div class="flex justify-center">
            <img
              v-if="item.imgList"
              :src="item.imgList[0] && item.imgList[0].url"
              class="main-img"
            />
          </div>
          <a-upload
            :action="$utils.imgAction"
            :key="item.alias"
            :headers="{ 'org-token': $store.getters.token }"
            v-model:file-list="item.imgList"
            @change="
              (e) => {
                handleArea5UploadChange(e);
              }
            "
            :multiple="false"
            name="image"
            :data="{ dir: 'org_personal' }"
            accept="image/jpg,image/jpeg,image/gif,image/png"
            :showUploadList="false"
          >
            <div class="flex justify-center mt-10">
              <a-button style="width: 260px">替换</a-button>
            </div>
            <div class="flex justify-center text-grey text-12">
              建议上传270*270尺寸
            </div>
          </a-upload>
          <a-row class="my-10"> 标题 </a-row>
          <a-row class="my-10">
            <a-input v-model:value="item.title"></a-input>
          </a-row>
          <a-row class="my-10"> 内容 </a-row>
          <a-row class="my-10">
            <a-textarea v-model:value="item.content"></a-textarea>
          </a-row>
        </div>
        <div v-if="currentAlias == 'Foot' && item.alias == 'Foot'">
          <a-row>
            <span class="font-bold">底部栏</span>
          </a-row>
          <a-row class="my-10"> 标题 </a-row>
          <a-row class="my-10">
            <a-input v-model:value="item.title"></a-input>
          </a-row>
        </div>
      </template>
      <!-- <choosePath :visible="visible" @ok="handleOk" @close="close">

      </choosePath> -->
      <LinkLibraryVue
        :visible="visible"
        :linkData="linkData"
        @success="handleOk"
        @close="close"
      ></LinkLibraryVue>
    </div>
    <div class="foot">
      <a-button type="primary" @click="submit">应用</a-button>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import {
  PlusOutlined,
  EditOutlined,
  RightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import utils from "../../../common/utils/utils";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import store from "../../../store";
import businessHome from "./businessHome.vue";
import choosePath from "./choosePath.vue";
import LinkLibraryVue from "./components/LinkLibrary.vue";
import _ from "lodash";
export default defineComponent({
  name: "businessRight",
  props: {
    current: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currentAlias: {
      type: String,
      default: "MainDrawing",
    },
  },
  components: {
    PlusOutlined,
    EditOutlined,
    businessHome,
    RightOutlined,
    choosePath,
    CloseOutlined,
    LinkLibraryVue,
  },
  setup(props, { emit }) {
    const uniqId = (randomLength = 12) => {
      return Number(
        Math.random().toString().substr(2, randomLength) + Date.now()
      ).toString(36);
    };
    const state = reactive({
      mainImgList: [], //主图
      visible: false,
      currentItemAlias: "MainDrawing",
      currentItemIndex: 0,
      linkData: {},
    });

    const handleUploadChange = (e) => {
      if (e.fileList.length) {
        let imgObj = e.fileList.find((item) => item.response);

        if (imgObj) {
          let result = imgObj.response;
          state.mainImgList = [
            {
              url: result.data.fileUrl,
            },
          ];
          console.log(
            state.mainImgList,
            " state.mainImgList state.mainImgList"
          );
          props.current.map((item) => {
            if (item.alias == props.currentAlias) {
              item.imgList = [
                {
                  url: result.data.fileUrl,
                },
              ];
            }
          });
        }
      }

      // emit('update:current', props.current)
    };
    const removeMainDrawing = () => {};

    const handleUploadMobileChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.slice(-1);
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              props.current.forEach((item) => {
                if (item.alias == "MainDrawingMobile") {
                  item.imgList[0].url = file.response.data.fileUrl;
                }
              });
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      }
    };

    watch(
      () => props.current,
      (list) => {
        list.map((item) => {
          if (item.alias == "MainDrawing") {
            // if (!state.mainImgList.length && item.imgList[0]) {
            state.mainImgList = [
              {
                uid: "1",
                name: "主图",
                status: "done",
                url: item.imgList[0].url,
              },
            ];
            // }
          }
        });
      },
      { deep: true, immediate: true }
    );
    const area1ImgChange = (e, area1) => {
      if (e.fileList.length) {
        let imgObj = e.fileList.find((item) => item.response);

        if (imgObj) {
          let result = imgObj.response;
          area1.imgList = [
            {
              url: result.data.fileUrl,
            },
          ];
        }
      }
    };
    const showChoosePath = (alias, item, index) => {
      state.currentItemAlias = alias;
      state.currentItemIndex = index;
      console.log(_.cloneDeep(item.linkData), "item.linkDataitem.linkData");
      if (item.linkData && item.linkData.name) {
        state.linkData = _.cloneDeep(item.linkData);
      }
      state.visible = true;
    };
    const handleOk = (obj) => {
      console.log(obj, "objobjobj");
      props.current.map((item) => {
        if (item.alias == state.currentItemAlias) {
          item.itemList[state.currentItemIndex].linkData = _.cloneDeep(obj);
        }
      });

      state.visible = false;
    };
    const close = () => {
      state.visible = false;
      state.linkData = {};
    };
    const area2ImgChange = (e, area2) => {
      if (e.fileList.length) {
        let imgObj = e.fileList.find((item) => item.response);

        if (imgObj) {
          let result = imgObj.response;
          area2.imgList = [
            {
              url: result.data.fileUrl,
            },
          ];
        }
      }
    };
    const addArea2Item = () => {
      props.current.map((item) => {
        if (item.alias == "PromotionArea2") {
          item.itemList.push({
            key: uniqId(),
            title: "法律法规",
            subTitle: "查看",
            isInput: false,
            imgList: [
              {
                url: utils.staticPath + `images/village/shuju.png`,
              },
            ],

            url: {
              type: "",
              value: "",
              name: "",
            },
          });
        }
      });
    };
    const addArea4Item = () => {
      props.current.map((item) => {
        if (item.alias == "PromotionArea4") {
          item.itemList.push({
            key: uniqId(),
            title: "招商加盟",
            subTitle: "查看",
            isInput: false,
            imgList: [
              {
                url: utils.staticPath + `images/village/shuju.png`,
              },
            ],

            url: {
              type: "",
              value: "",
              name: "",
            },
          });
        }
      });
    };
    const delArea2Item = (key) => {
      props.current.map((item) => {
        if (item.alias == "PromotionArea2") {
          let index = item.itemList.findIndex((t) => t.key == key);
          console.log(index, "indexindex");
          item.itemList.splice(index, 1);
        }
      });
    };
    const delArea4Item = (key) => {
      props.current.map((item) => {
        if (item.alias == "PromotionArea4") {
          let index = item.itemList.findIndex((t) => t.key == key);
          console.log(index, "indexindex");
          item.itemList.splice(index, 1);
        }
      });
    };
    const handleArea5UploadChange = (e) => {
      if (e.fileList.length) {
        let imgObj = e.fileList.find((item) => item.response);

        if (imgObj) {
          let result = imgObj.response;

          props.current.map((item) => {
            if (item.alias == props.currentAlias) {
              item.imgList = [
                {
                  url: result.data.fileUrl,
                },
              ];
            }
          });
        }
      }
    };
    const submit = () => {
      let mobileList = [];
      props.current.forEach((item) => {
        if (item.alias == "MainDrawingMobile") {
          mobileList.push(item);
        }
      });

      console.log(mobileList, "mobileList");
      request
        .post("/village", "/clue/home/page", {
          content: props.current,
        })
        .then((res) => {
          request
            .post("/village", "/clue/home/page", {
              content: mobileList,
              is_mobile: 1,
            })
            .then((res) => {
              message.success("设置成功");
            });
        });
    };
    return {
      ...toRefs(state),
      handleUploadChange,
      removeMainDrawing,
      area1ImgChange,
      showChoosePath,
      handleOk,
      close,
      area2ImgChange,
      addArea2Item,
      addArea4Item,
      delArea2Item,
      delArea4Item,
      handleArea5UploadChange,
      submit,
      handleUploadMobileChange,
    };
  },
});
</script>

<style lang="less" scoped>
.right-box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.mt-10 {
  margin-top: 10px;
}

.main-img {
  width: 260px;
  height: 120px;
  object-fit: cover;
}
.main-mobile-img {
  width: 260px;
  height: 120px;
  object-fit: scale-down;
}

.text-grey {
  color: #aaa;
}

.text-12 {
  font-size: 12px;
}

.area1 {
  background: #f2f2f2;
  padding: 10px;
  font-size: 12px;
  border-radius: 3px;
}

.font-bold {
  font-weight: 600;
  color: #000;
}

.area1-img {
  width: 45px;
  height: 45px;
}

.border-dashed {
  border-bottom: 1px dashed #d4d2d2;
}

.area-bottom {
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
}

.p-10 {
  padding: 10px;
}

.mt-5 {
  margin-top: 10px;
}

.ml-5 {
  margin-left: 5px;
}

:deep(.area1 .ant-upload-list-picture-card-container) {
  width: 60px !important;
  height: 60px !important;
}

:deep(.area1 .ant-upload-picture-card-wrapper) {
  width: 60px !important;
  height: 60px !important;
}

.my-10 {
  margin: 10px 0;
}

:deep(.area1 .ant-upload-list-picture-card .ant-upload-list-item) {
  width: 60px !important;
  height: 60px !important;
}

:deep(.area1 .ant-upload.ant-upload-select-picture-card) {
  width: 60px !important;
  height: 60px !important;
}

.foot {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}
.no-fixed-tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.del-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: -10px;
  width: 20px;
  height: 20px;
  background: #aaa;
  border-radius: 50%;
  opacity: 0;
}
.area1-list:hover .del-icon {
  opacity: 1 !important;
}

.area4-list:hover .del-icon {
  opacity: 1 !important;
}
.mt-30 {
  margin-top: 30px;
}
</style>
